<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Login</title>  
    <link rel="stylesheet" type="text/css" href="../css/login.css"/>
</head>  
<body>  
    <div id="login" >
        <h1>Login</h1>  
        <form method="post">  
            <input style="color: #000000;" type="text" v-model="param.userName" @blur="check(1)" @focus="clear(1)" required oninvalid ="setCustomValidity('请输入账号');" oninput="setCustomValidity('');" placeholder="账号" name="userName"></input>
            <input style="color: #000000;" type="password" v-model="param.password" @blur="check(2)" @focus="clear(2)" required oninvalid ="setCustomValidity('请输入密码');" oninput="setCustomValidity('');" placeholder="密码" name="password"></input>
            <button class="but" @click="login()" type="button">登录</button>
        </form>
    </div>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/axios.js"></script>
    <script type="text/javascript" src="../js/message.js" ></script>
    <script>
        var vue = new Vue({
            el:"#login",
            data:{
                param :{
                    "userName" : "",
                    "password" : ""
                },
                errorFlg : {
                    "userNameFlg" : false,
                    "passwordFlg" : false,
                    "loginFlag" : false
                },
                errorMsg : {
                    "userNameMsg" : "",
                    "passwordMsg" : "",
                    "loginMsg" : ""
                }
            },
            methods:{
                check : function(type) {
                    if(type==1) {
                        if(this.param.userName == null || this.param.userName == "") {
                            this.errorFlg.userNameFlg = true;
                            this.errorMsg.userNameMsg = "请输入用户名";
                        }
                    } else if(type ==2) {
                        if(this.param.password == null ||this.param.password == "") {
                            this.errorFlg.passwordFlg = true;
                            this.errorMsg.passwordMsg = "请输入密码";
                        }
                    }
                },
                login : function() {
                    this.check(1);
                    this.check(2);
                    if (this.errorFlg.userNameFlg || this.errorFlg.passwordFlg) {
                        return;
                    }
                    var self = this;
                    axios.post("http://localhost:8000/bracelet/release/api/login",
                        {
                            "userName": this.param.userName,
                            "password": this.param.password
                        })
                        .then(res => {
                            console.log(res.data);
                            if(res.data.msgId == "A001") {
                                self.errorFlg.loginFlg = true;
                                self.errorMsg.loginMsg = message.A001;
                                alert('您输入的用户名不存在');
                            } else if(res.data.msgId == "A002") {
                                self.errorFlg.loginFlg = true;
                                self.errorMsg.loginMsg = message.A002;
                                alert('密码错误');
                            } else if(res.data.msgId == "A010") {
                                // 普通用户登录成功
                                sessionStorage.setItem("authtoken",res.data.result.authtoken);
                                sessionStorage.setItem("username",res.data.result.username);
                                location.replace('userMenu.html');
                            }else if(res.data.msgId == "A011"){
                                // 管理员登录成功
                                sessionStorage.setItem("authtoken",res.data.result.authtoken);
                                sessionStorage.setItem("username",res.data.result.username);
                                location.replace('adminMenu.html');
                            }
                            ;
                        })
                        .catch(error => {
                            location.href = "../500.html";
                        });
                },
                clear : function(type) {
                    if(type==1) {
                        this.errorFlg.userNameFlg = false;
                    }  else if(type ==2) {
                        this.errorFlg.passwordFlg = false;
                    }
                }
            }

        });
    </script>
</body>
</html>